<template>
    <view class="content">
        <view class="mart-30">
            <view class="commit-title">钢丝绳信息</view>
            <view class="topContent readBox" v-if="thisData">
                <u-read-more ref="uReadMore" :showHeight="200" closeText="查看更多" :toggle="true" @open="readMoreChange" @close="readMoreChange">
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳编码</text>
                        </u-col>
                        <u-col span="8">
                            <DataSelect :disabled="thisID != null" class="w-100" table="UsingWirerope" action="GetSearchs" :filter="{ _Status: 1 }" label="code" value="autoID" :obj.sync="usingWireropeObj" :id.sync="thisData.usingWireropeID" :name.sync="thisData.usingWirerope_Code"></DataSelect>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳名称</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.name }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">规格型号</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.guiGe }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">直径</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.diameter }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">公称捻距</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.nianJu }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">长度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.lengthNum }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">绳子条数</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.cnt }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">抗拉强度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.mpaName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">表面状态</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.surfaceStatusName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">捻制类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.twistingTypeName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">矿山</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.department_Name }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装日期</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.installDate | ymd }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装长度</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.installLengthNum }} </text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">安装地点</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.installAddressName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升机类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.hoisterName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">提升用途</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.hoisterUsageName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">钢丝绳类型</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.wireropeTypeName }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">主要负责人</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.linkUser }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">负责人电话</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.linkPhone }}</text>
                        </u-col>
                    </u-row>

                    <u-line class="marb-20"></u-line>
                    <u-row gutter="0" class="marb-20">
                        <u-col span="4" textAlign="center">
                            <text class="label-name">备注</text>
                        </u-col>
                        <u-col span="6">
                            <text class="label-name">{{ usingWireropeObj.remark }}</text>
                        </u-col>
                    </u-row>
                </u-read-more>
            </view>
        </view>
        <view class="mart-30">
            <view class="commit-title">维保信息</view>
            <view class="topContent">
                <u--form ref="uForm" :model="thisData" :rules="rules" label-width="120" labelAlign="center" :disabled="!isEdit">
                    <u-form-item label="维保类型" :required="true" borderBottom prop="wireropeKeepTypeID">
                        <view class="w-100">
                            <DataSelect class="w-100" :disabled="!isEdit" @onChange="codeChange" table="WireropeKeepType" action="GetSearch" :filter="{ _IsOut: false }" label="name" value="autoID" :obj.sync="codeObj" :id.sync="thisData.wireropeKeepTypeID" :name.sync="thisData.wireropeKeepType_Name" @onShow="onPreviewShow" @onClose="onPreviewHide"></DataSelect>
                        </view>
                    </u-form-item>
                    <u-form-item label="实施对象" borderBottom prop="doPosition" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="thisData.doPosition" :disabled="!isEdit" placeholder="请输入实施对象" />
                        </view>
                    </u-form-item>
                    <u-form-item label="实施部门" borderBottom prop="companyName" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="thisData.companyName" :disabled="!isEdit" placeholder="请输入实施部门" />
                        </view>
                    </u-form-item>
                    <u-form-item label="实施人员" borderBottom prop="userName" class="relativeCol">
                        <view class="w-100">
                            <u-input v-model="thisData.userName" :disabled="!isEdit" placeholder="请输入实施人员"> </u-input>
                        </view>
                    </u-form-item>
                    <u-form-item label="实施日期" :required="true" borderBottom prop="doDate" class="relativeCol">
                        <view class="w-100">
                            <uni-datetime-picker :disabled="!isEdit" type="date" v-model="thisData.doDate" @onShow="onPreviewShow" @onClose="onPreviewHide" />
                        </view>
                    </u-form-item>
                    <u-form-item label="实施备注" borderBottom prop="remark" class="relativeCol">
                        <view class="w-100">
                            <u-input :disabled="!isEdit" v-model="thisData.remark" type="textarea" placeholder="请输入备注"> </u-input>
                        </view>
                    </u-form-item>
                    <u-form-item label="实施照片" borderBottom>
                        <view class="w-100">
                            <Upload ref="picUploadRef" :disabled="!isEdit" v-model="thisData.pic_ImgsList" :limit="30" @onPreviewShow="onPreviewShow" @onPreviewHide="onPreviewHide"></Upload>
                        </view>
                    </u-form-item>
                    <u-form-item label="附件" borderBottom>
                        <view class="w-100">
                            <Upload ref="attrUploadRef" :disabled="!isEdit" v-model="thisData.attr_FilesList" :limit="30" @onPreviewShow="onPreviewShow" @onPreviewHide="onPreviewHide"></Upload>
                        </view>
                    </u-form-item>
                </u--form>
                <view class="mart-30" v-show="isEdit">
                    <u-row justify="center">
                        <u-col span="6">
                            <u-button type="primary" @click="submit">保存</u-button>
                        </u-col>
                    </u-row>
                </view>
            </view>
        </view>

        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isEdit: true,
            thisID: null,
            thisData: {
                userName: getApp().globalData.name,
                doDate: this.$gx.GetDateTime(),
            },
            usingWireropeObj: {},
            rules: {
                wireropeKeepTypeID: [
                    {
                        required: true,
                        type: "any",
                        message: "维保类型",
                        trigger: ["blur", "change"],
                    },
					{
					    validator: () => {
					        this.$nextTick(() => {
					            uni.$emit("refreshUpload");
					        })
					    },
					    trigger: ["blur", "change"],
					}
                ],
                doDate: [
                    {
                        required: true,
                        message: "实施日期",
                        trigger: ["blur", "change"],
                    },
					{
					    validator: () => {
					        this.$nextTick(() => {
					            uni.$emit("refreshUpload");
					        })
					    },
					    trigger: ["blur", "change"],
					}
                ],
            },
            codeObj: {},
        };
    },
    //生命周期-加载
    onLoad: function (option) {
        let that = this;
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif

        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.on("editData", function (data) {
            let type = 0;
            that.isEdit = true;
            if (data.operateType == "编辑") type = 1;
            if (data.operateType == "详情") {
                (type = 3), (that.isEdit = false);
            }
            that.init(data.data, type);
        });
    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$nextTick(() => {
            this.$refs.uForm.setRules(this.rules);
        });
    },
    methods: {
        codeChange() {
            let codeObj = this.codeObj;
            if (Object.keys(codeObj).length < 1) {
                this.setRopeData("");
                return;
            }
            this.setRopeData(codeObj);
        },

        setRopeData(data) {
            let hasCol = ["code", "stockID", "name", "guiGe", "diameter", "nianJu", "lengthNum", "cnt", "mpaID", "mpaName", "surfaceStatusID", "surfaceStatusName", "twistingTypeID", "twistingTypeName", "departmentID", "departmentName", "installAddressID", "installAddressName", "hoisterID", "hoisterName", "hoisterUsageID", "hoisterUsageName", "wireropeTypeID", "wireropeTypeName", "remark"];
            hasCol.map((x) => {
                if (data == "") {
                    this.$set(this.thisData, x, "");
                } else {
                    this.$set(this.thisData, x, data[x]);
                }
            });
        },

        init(data, type) {
            // type1编辑0添加
            if (data.usingWireropeKeepID) {
                this.thisID = data.usingWireropeKeepID;
                this.$app.CallApi(this.$app.api.UsingWireropeKeep.GetByID(this.thisID), {
                    success: (res) => {
                        // this.$refs.ropeInfoRef.init(res.usingWireropeModel);
                        this.usingWireropeObj = res.usingWireropeModel;
                        this.thisData = res;
                        this.thisData.usingWirerope_Code = res.usingWireropeModel.code;
                    },
                });
            }
        },

        submit() {
            this.$refs.uForm
                .validate()
                .then((res) => {
                    if (this.$gx.IsEmpty(this.thisData.usingWireropeID)) {
                        this.$refs.uToast.show({ type: "error", title: "", message: "请选择钢丝绳！" });
                        return;
                    }

                    let apiFun = this.$app.api.UsingWireropeKeep.Insert;

                    this.$app.CallApi(apiFun, {
                        data: this.thisData,
                        success: (res) => {
                            this.$refs.uToast.show({
                                type: "success",
                                title: "",
                                message: "保存成功！",
                                complete: () => {
                                    uni.navigateBack();
                                    uni.$emit("refreshData");
                                },
                            });
                        },
                    });
                })
                .catch((errors) => {});
        },
        //文件预览开启
        onPreviewShow() {
            this.$refs.picUploadRef.setReadOnly(true);
            this.$refs.attrUploadRef.setReadOnly(true);
        },
        //文件预览关闭
        onPreviewHide() {
            this.$refs.picUploadRef.setReadOnly(false);
            this.$refs.attrUploadRef.setReadOnly(false);
        },
		readMoreChange() {
		    uni.$emit("refreshUpload");
		},
    },
};
</script>

<style></style>
